<!--
 * @Author: DaHuaZhuXi
 * @Date: 2020-11-23 15:13:03
 * @LastEditTime: 2021-01-14 21:32:29
 * @LastEditors: DaHuaZhuXi
 * @Description: 迷宫地图
-->
<template>
  <div class="flexCenter">
    <div class="mapWrap">
      <!-- 主内容 S -->
      <canvas id="map" @click.stop="click_map($event)"></canvas>
      <i
        v-if="curPoint"
        id="team"
        class="iconfont icon-team"
        :style="{
          width: map.unitSize + 'px',
          height: map.unitSize + 'px',
          fontSize: map.unitSize + 'px',
          left: map.unitSize * curPoint.x + 'px',
          top: map.unitSize * curPoint.y + 'px',
        }"
      ></i>
      <!-- 主内容 E -->
    </div>
    <HeaderBar></HeaderBar>
    <FooterNav></FooterNav>
  </div>
</template>

<script>
import { createMapDatas, Map, setMapPointClass, visitMapPoint, isLink, setTargetPoint } from "./code/tool.js"
export default {
  components: {},
  data() {
    return {
      map: null,
      mapDatas: [],
      curPoint: null
    }
  },
  created() {
    // 地图点类型 type： 0 点，1 线
    this.mapSize = config.mazeMapSize; //地图尺寸，屏幕横向划分格子数，必须基数使之居中
    this.maxPoints = config.mazeMaxPoints; //生产迷宫点数量
    this.mapPointClass = config.mazeMapPointClass; //地图点类别
    this.placeId = this.$store.state.maze.placeId; //迷宫地点id（郊外等）
    console.log(this.$route);

    this.winner = this.$route.params.winner; //战斗结束返回结构

    console.log("winner", this.winner);
  },
  mounted() {
    let mapOption = {
      $map: document.querySelector("#map"),
      cols: this.mapSize,
    }

    // 如果是战斗结束返回则读取store的地图数据，否则新建地图数据
    if (this.winner != undefined) {
      this.mapDatas = this.$store.state.maze.mapDatas;
      if (this.winner) {
        let pointOjb = this.mapDatas.find( p=>p.isTarget );
        this.visitMapPoint(pointOjb)
      }
      console.log("读取地图数据", this.mapDatas);
    } else {
      let mapDatas = createMapDatas({
        rows: mapOption.cols,
        cols: mapOption.cols,
        maxPoints: this.maxPoints
      });
      // 设置类别
      this.mapDatas = setMapPointClass(mapDatas);
      this.visitMapPoint("起点");
      console.log("随机地图数据", this.mapDatas);
    }

    // 画图
    this.map = new Map(mapOption, this.mapDatas);
    this.map.drawMap();
    this.map.drawMapDatas();
    this.curPoint = this.mapDatas.find(item => item.isCurrent);
  },

  methods: {
    // 添加地图事件
    click_map(e) {
      let point = common.getMapPoint(e, this.map.unitSize, document.querySelector(".mapWrap"));
      let pointOjb = this.mapDatas.find(d => d.x == point[0] && d.y == point[1]);
      if (!pointOjb || pointOjb.type == 1 || !pointOjb.canVisit) return;
      setTargetPoint(pointOjb, this.mapDatas);
      console.log("点击坐标：", point, this.mapPointClass[pointOjb.class].name);
      this.preMove(pointOjb);
    },

    //移动前判断
    preMove(pointOjb) {
      switch (this.mapPointClass[pointOjb.class].name) {
        case "起点":
          this.$dialog.confirm({
            title: `退出迷宫`,
            message: `确定原路返回，并退出当前迷宫吗？`,
          }).then(() => {
            this.moveTo(pointOjb)
          }).catch(() => {
          });
          break;
        case "终点":
          this.$dialog.confirm({
            title: `退出迷宫`,
            message: `确定退出当前迷宫吗？`,
          }).then(() => {
            this.moveTo(pointOjb)
          }).catch(() => {
          });
          break;
        default:
          this.moveTo(pointOjb);
          break;
      }
    },

    //执行移动动画，动画结束后再执行判断点类型
    moveTo(pointOjb) {
      this.curPoint = this.mapDatas.find(item => item.isTarget);
      let ele = document.querySelector("#team");
      if (!ele) return;
      ele.classList.add("animate");
      setTimeout(() => {
        ele.classList.remove("animate");
        this.afterMove(pointOjb);
      }, 2000)
    },

    //动画结束后再执行判断点类型
    afterMove(pointOjb) {
      switch (this.mapPointClass[pointOjb.class].name) {
        case "空点":
          this.visitMapPoint(pointOjb)
          break;
        case "起点":
        case "终点":
          this.$router.push("WorldMap")
          break;
        case "战斗":
          this.$router.push("/Battle")
          break;
        case "事件":
          this.visitMapPoint(pointOjb)
          break;
        case "休息":
          this.visitMapPoint(pointOjb)
          break;
      }
    },

    //使point已探索
    visitMapPoint(pointOjb) {
      visitMapPoint(pointOjb, this.mapDatas);
      this.$store.commit("updateMazeData", this);
      this.map?.update();
    },
  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
#map {
  display: block;
  margin: 0 auto;
}
.mapWrap {
  position: relative;
  #team {
    position: absolute;
    transition: 2000ms linear;
    color: #1989fa;
    transform: scale(1.5);
    text-shadow: 0 0 5px rgba($color: #000, $alpha: 1);
  }
  #team.animate {
    animation: go 0.5s infinite;
  }
}

@keyframes go {
  0% {
    transform: scale(1.5) rotate(0deg);
  }
  25% {
    transform: scale(1.5) rotate(-20deg);
  }
  50% {
    transform: scale(1.5) rotate(0deg);
  }
  75% {
    transform: scale(1.5) rotate(20deg);
  }
  100% {
    transform: scale(1.5) rotate(0deg);
  }
}
</style>